import 'dart:io';

import 'package:moonplay/common/app_common.dart';
import 'package:moonplay/pages/common_page/common_text_page.dart';
import 'package:flutter/material.dart';

class CommonFilterPage extends StatefulWidget {
  final double height;
  final Function backFun;
  final int type;
  final int typeIndex;
  final int yearIndex;

  CommonFilterPage({Key key, @required this.height, this.backFun, this.type, this.typeIndex, this.yearIndex}) : super(key: key);
  @override
  _CommonFilterPageState createState() => _CommonFilterPageState();
}

class _CommonFilterPageState extends State<CommonFilterPage> {
  double _height = 0;
  Color _color = Color.fromARGB(0, 0,0,0);
  List typeList = [
    {"typeId": 0, "typeName": "全部"},
    {"typeId": 6, "typeName": "动作片"},
    {"typeId": 7, "typeName": "喜剧片"},
    {"typeId": 8, "typeName": "爱情片"},
    {"typeId": 9, "typeName": "科幻片"},
    {"typeId": 10, "typeName": "恐怖片"},
    {"typeId": 11, "typeName": "剧情片"},
    {"typeId": 12, "typeName": "战争片"},
  ];

  List typeList1 = [
    {"typeId": 0, "typeName": "全部"},
    {"typeId": 13, "typeName": "国产剧"},
    {"typeId": 14, "typeName": "港台剧"},
    {"typeId": 15, "typeName": "日韩剧"},
    {"typeId": 16, "typeName": "欧美剧"},
  ];

  List yearList = ["全部", "2020", "2019", "2018", "2017", "2016", "2015", "2014", "2013", "2012", "2011", "其它"];
  Color selectColor = Color(0xffcccccc);
  Color notSelectColor = Color(0xfff5f8f8);
  int typeIndex = 0;
  int yearIndex = 0;
  List types = [];

  @override
  void initState() {
    super.initState();
    typeIndex = widget.typeIndex;
    yearIndex = widget.yearIndex;
    _init();
    print(widget.type);

    if(widget.type == 1) {
      types = typeList;
    } else if(widget.type == 2) {
      types = typeList1;
    }
  }

  @override
  dispose() {
    widget.backFun(types[typeIndex]['typeId'], yearList[yearIndex], typeIndex, yearIndex);
    super.dispose();
  }

  Future _init() async {
    await Future.delayed(Duration(milliseconds: 0));
    setState(() {
      _height = ScreenUtil().getHeightPx(800);
      _color = Color.fromARGB(150, 0,0,0);
    });
  }

  @override
  Widget build(BuildContext context) {
    return widget.type > 0
    ? GestureDetector(
      onTap: (){
        Navigator.of(context).pop();
      },
      child: Container(
        width: double.infinity,
        color: Color.fromARGB(100, 0,0,0),
        height: widget.height,
        child: ScrollConfiguration(
          behavior: MyBehavior(),  //自定义behavior
          child: ListView(
            children: <Widget>[
              GestureDetector(
                onTap: (){},
                child: AnimatedContainer(
                  width: double.infinity,
                  height: _height,
                  duration: Duration(milliseconds: 200),
                  child: Stack(
                    children: <Widget>[
                      Positioned(
                        top: 0,
                        bottom: ScreenUtil().getHeightPx(88),
                        left: 0,
                        right: 0,
                        child: Container(
                          color: Colors.white,
                          child: ListView(
                            children: _getData(),
                          ),
                        ),
                      ),
                      Positioned(
                        bottom: 0,
                        left: 0,
                        right: 0,
                        child: Container(
                          height: ScreenUtil().getHeightPx(88),
                          child: Row(
                            children: <Widget>[
                              Expanded(
                                flex: 1,
                                child: GestureDetector(
                                  onTap: (){
                                    setState(() {
                                      typeIndex = 0;
                                      yearIndex = 0;
                                    });
                                  },
                                  child: Container(
                                    alignment: Alignment.center,
                                    color: Color(0xffdddddd),
                                    child: Text('重置'),
                                  ),
                                ),
                              ),
                              Expanded(
                                flex: 1,
                                child: GestureDetector(
                                  onTap: (){
                                    Navigator.of(context).pop();
                                  },
                                  child: Container(
                                    alignment: Alignment.center,
                                    color: Colors.blue,
                                    child: Text('确定'),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              )
            ],
          )
        )
      ),
    )
    : Container();
  }

  List<Widget> _getData(){
    List<Widget> _list = [
      SizedBox(height: ScreenUtil().getWidthPx(20)),
      Container(
        width: double.infinity,
        padding: EdgeInsets.symmetric(horizontal: ScreenUtil().getWidthPx(30)),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            widget.type == 1 || widget.type == 2
            ? Cmtext('类型', style: TextStyle(fontSize: 16),) : Container(),
            widget.type == 1 || widget.type == 1
            ? SizedBox(height: ScreenUtil().getWidthPx(20)) : Container(),
            widget.type == 1 || widget.type == 2
            ? Container(
              height: 100,
              child: GridView.builder(
                itemCount: types.length,
                //SliverGridDelegateWithFixedCrossAxisCount 构建一个横轴固定数量Widget
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  //横轴元素个数
                  crossAxisCount: 5,
                  //纵轴间距
                  mainAxisSpacing: 10.0,
                  //横轴间距
                  crossAxisSpacing: 6.0,
                  //子组件宽高长度比例
                  childAspectRatio: 1.8
                ),
                itemBuilder: (BuildContext context, int index) {
                  return InkWell(
                    onTap: (){
                      setState(() {
                        typeIndex = index;
                      });
                    },
                    child: Container(
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        color: typeIndex == index ? selectColor : notSelectColor,
                        borderRadius: BorderRadius.all(Radius.circular(4))
                      ),
                      child: Cmtext('${types[index]['typeName']}', style: TextStyle(fontSize: 14, color: Theme.of(context).primaryColor),),
                    ),
                  );
                }
              ),
            )
             : Container(),
          ],
        ),
      ),
      Container(
        width: double.infinity,
        padding: EdgeInsets.symmetric(horizontal: ScreenUtil().getWidthPx(30)),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Cmtext('年份', style: TextStyle(fontSize: 16),),
            SizedBox(height: ScreenUtil().getWidthPx(20)),
            Container(
              height: 150,
              child: GridView.builder(
                itemCount: yearList.length,
                //SliverGridDelegateWithFixedCrossAxisCount 构建一个横轴固定数量Widget
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  //横轴元素个数
                  crossAxisCount: 5,
                  //纵轴间距
                  mainAxisSpacing: 10.0,
                  //横轴间距
                  crossAxisSpacing: 6.0,
                  //子组件宽高长度比例
                  childAspectRatio: 1.8
                ),
                itemBuilder: (BuildContext context, int index) {
                  return InkWell(
                    onTap: (){
                      setState(() {
                        yearIndex = index;
                      });
                    },
                    child: Container(
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        color: yearIndex == index ? selectColor : notSelectColor,
                        borderRadius: BorderRadius.all(Radius.circular(4))
                      ),
                      child: Cmtext('${yearList[index]}', style: TextStyle(fontSize: 14, color: Theme.of(context).primaryColor),),
                    ),
                  );
                }
              ),
            )
          ],
        ),
      ),
    ];
    
    return _list;
  }
}

class MyBehavior  extends ScrollBehavior{
 @override
 Widget buildViewportChrome(BuildContext context, Widget child, AxisDirection axisDirection) {
    if(Platform.isAndroid||Platform.isFuchsia){
     return child;
  }else{
    return super.buildViewportChrome(context,child,axisDirection);
    }
 }
}